/*
  simple-links.css (various simple html links)
*/

/******************************************
 Widget (color horizontal rectangular html links)

<div class="rect-horizontal-link clearfix">
  <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four much longer than the rest</a></li>
  </ul>
</div>
--------------------------------------- **/
div.rect-horizontal-link ul {
  float:left;
  width:100%;
  padding:0;
  margin:0;
  list-style-type:none;
}

div.rect-horizontal-link a {
  float:left;
  width:6em;      /* rectangle width */
  height: 3.5em;  /* rectangle height 3.5em is roughly 3 lines*/
  text-decoration:none;
  color:white;
  background-color:purple;
  padding:0.2em 0.6em;
  border-right:1px solid white;
  border-bottom:1px solid white;
}

/**
  Overriding background and text color
  <a class="grey" ... />
*/
div.rect-horizontal-link a.grey {
  text-decoration:none;
  color:white;
  background-color:grey;
}
div.rect-horizontal-link a.orange {
  text-decoration:none;
  color:white;
  background-color:orange;
}
div.rect-horizontal-link a.green {
  text-decoration:none;
  color:white;
  background-color:green;
}

/** Anchor hover */
div.rect-horizontal-link a:hover {background-color:#ff3300}
div.rect-horizontal-link li {display:inline;}


/************************************
 Important: Link pseudo-classes must be
            in this exact order
            or problem will occur
 ie. link > visited > hover > active
---------------------------------- **/
/*
a:link {
	color: #00c;
	text-decoration: none;
	border-bottom: none;
}
a:visited {
	color: #609;
	text-decoration: none;
	border-bottom: none;
}
a:hover {
	color: #00c;
	background-color: yellow;
}
a:active {
	color: #c00
}
*/
